<template>
	<div class="evidence-borrow-detail-container">
		<el-card shadow="hover" body-style="padding:8px; ">
			<div class="card-header" style="width: 100%; margin-top: 5px; border-top: 1px solid AliceBlue">
				<el-row justify="end" style="margin-bottom: 15px; margin-top: 3px">
					<el-col :span="8">
						<div style="float: left; height: 40px; width: 5px; background: green"></div>
						<div style="float: left; margin-top: 10px; margin-left: 20px; font-size: 16px">案件信息</div>
					</el-col>
					<el-col :span="16" style="text-align: right"> </el-col>
				</el-row>
				<ShowCase :formInline="formInline" />
			</div>
			<div class="card-header" style="width: 100%; margin-top: 5px; border-top: 1px solid AliceBlue">
				<el-row justify="end" style="margin-bottom: 15px; margin-top: 3px">
					<el-col :span="8">
						<div style="float: left; height: 40px; width: 5px; background: green"></div>
						<div style="float: left; margin-top: 10px; margin-left: 20px; font-size: 16px">物品列表</div>
					</el-col>
					<el-col :span="16" style="text-align: right"> </el-col>
				</el-row>
				<EveidenceList :selectionEvidences="selectionEvidences" :outType="outType" :showOperation="true" />
			</div>
			<div class="card-header" style="width: 100%; margin-top: 5px; border-top: 1px solid AliceBlue">
				<el-row justify="end" style="margin-bottom: 15px; margin-top: 3px">
					<el-col :span="24">
						<div style="float: left; height: 40px; width: 5px; background: green"></div>
						<div style="float: left; margin-top: 10px; margin-left: 20px; font-size: 16px">{{ outTypeTitle }}信息</div>
					</el-col>
				</el-row>
				<DetailComp :transfereInfo="transfereInfo" :formInline="formInline" :outType="outType" />
			</div>
		</el-card>
		<el-row justify="center" style="margin-top: 30px">
			<el-button type="primary" icon="el-icon-edit" @click="onSign(outType == 6 ? 4 : 5)" align="center" size="medium"
				>{{ outTypeTitle }}人签名</el-button
			>
			<el-button type="primary" icon="el-icon-price-tag" @click="onSign(6)" align="center" size="medium">保管人签名</el-button>
			<el-button type="primary" icon="el-icon-open" @click="onOpenInfo" align="center" size="medium">开柜存取</el-button>
			<!-- <el-button type="primary" icon="el-icon-warning" @click="onRevokeInfo" align="center" size="medium"> 撤销 </el-button> -->
			<el-button type="primary" icon="el-icon-printer" @click="onPrinterListInfo" align="center" size="medium">打印清单</el-button>
			<el-button type="primary" icon="el-icon-box" @click="onEviImgInfo()" align="center" size="medium">查看凭证</el-button>
		</el-row>
		<Sign ref="SignRef" />
		<OutInventory ref="OutInventoryRef" :formInline="formInline" />
		<InInventory ref="InInventoryRef" :formInline="formInline" />
	</div>
</template>

<script lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ShowCase from '/@/views/evidence/unit/component/showCase.vue';
import EveidenceList from '/@/views/evidence/common/evidenceList.vue';
import DetailComp from '/@/views/evidence/common/detailComp.vue';
import Sign from '/@/views/evidence/common/sign.vue';
import OutInventory from '/@/views/evidence/unit/component/outInventory.vue';
import InInventory from '/@/views/evidence/unit/component/inInventory.vue';
import { useStore } from '/@/store/index';
import { getOutType } from '/@/common/index';
import { PostBase64Imgs } from '/@/api/common/index';
import { ElMessage,ElMessageBox } from 'element-plus';
import { queryImgs } from '/@/api/common/index';
export default {
	name: 'BorrowDetail',
	components: { ShowCase, Sign, EveidenceList, DetailComp, OutInventory,InInventory },
	activated(){
		this.formInline = this.$store.state.customs.customs.formInline;
		this.transfereInfo = this.$store.state.customs.customs.transfereInfo;
		this.selectionEvidences = this.$store.state.customs.customs.selectionEvidences;
		this.deliveryNo = this.$store.state.customs.customs.deliveryNo;
		this.saveSignImg = this.$store.state.customs.customs.saveSignImg;
		this.signImg = this.$store.state.customs.customs.signImg;
	},
	setup() {
		const store = useStore();
		const router = useRouter();
		const route = useRoute();
		const state = reactive({
			formInline: store.state.customs.customs.formInline,
			outTypeTitle: getOutType(route.query.outType),
			outType: Number(route.query.outType),
			transfereInfo: store.state.customs.customs.transfereInfo,
			selectionEvidences: store.state.customs.customs.selectionEvidences,
			deliveryNo: store.state.customs.customs.deliveryNo,
			saveSignImg: store.state.customs.customs.saveSignImg,
			signImg: store.state.customs.customs.signImg,
		});
		const SignRef = ref();
		const OutInventoryRef = ref();
		const InInventoryRef = ref();
		const onSignInfo = () => {
			SignRef.value.openDialog();
		};
		const onSign = (type) => {
			Formium.external.callDevice.sysSingFunction(JSON.stringify({ id: 123, ty: type }));
		};
		onMounted(() => {
			window.clientPhotograph = (_data: any) => {
				clientPhotograph(_data);
			};

			window.openBoxResult = (_data: any) => {
				openBoxResult(_data);
			};
		});
		async function clientPhotograph(_data: any) {
			_data = JSON.parse(_data);
			PostBase64Imgs({ RelevanceNo: state.deliveryNo, Type: _data.Type, base64Imgs: _data.base64Imgs }).then((res: any) => {
				if (res.success) {
					queryImg(_data.Type);
					ElMessage.success('上传成功');
				}
			});
		}
		function openBoxResult(_data: any) {
			_data = JSON.parse(_data);
			if (_data.Success) {
				//数据传给客户端
				ElMessage.success('已打开柜子');
			}
		}
		async function queryImg(Type: any) {
			await queryImgs(state.deliveryNo, Type).then((res1: any) => {
				operateImgs(res1.data[0].url, Type);
				if (Type == 6) {
					state.formInline.saveSignImg = res1.data[0].url;
				} else {
					state.formInline.signImg = res1.data[0].url;
				}
			});
		}
		function operateImgs(url: String, type: any) {
			if (state.formInline.imgs.some((x: any) => x.type == type)) {
				state.formInline.imgs.find((x: any) => x.type == type).url = url;
			} else {
				state.formInline.imgs.push({ url: url, type: type });
			}
		}
		const onPrinterListInfo = () => {
			if(state.outType==6)
			{
				InInventoryRef.value.openDialog({
				formInlineCase: state.formInline,
				deliveryNo: state.deliveryNo,
				transfereInfo: state.transfereInfo,
				row: state.selectionEvidences.map((x: any) => {
					return {
						evidenceName: x.name,
						evidenceNo: x.no,
						evidenceQuntity: x.quantity,
						evidenceShape: x.shape,
						usefulLife: x.extractionDateTime,
						describe: x.describe,
						extractionPersonName: x.extractionPersonName,
						extractionParts: x.extractionParts,
						location:state.transfereInfo.location
					};
				}),
			});
				return;
			}

			OutInventoryRef.value.openDialog({
				formInlineCase: state.formInline,
				deliveryNo: state.deliveryNo,
				transfereInfo: state.transfereInfo,
				row: state.selectionEvidences.map((x: any) => {
					return {
						evidenceName: x.name,
						evidenceNo: x.no,
						evidenceQuntity: x.quantity,
						evidenceShape: x.shape,
						usefulLife: x.extractionDateTime,
						describe: x.describe,
						extractionPersonName: x.extractionPersonName,
						extractionParts: x.extractionParts,
						location:x.location

					};
				}),
			});
		};
		const onOpenInfo = () => {};
		const onRevokeInfo = () => {};
		const onEviImgInfo = () => {
			router.getRoutes().find((x) => x.name == 'evidenceImg').meta.title = `凭证照片`;
			router.getRoutes().find((x) => x.name == 'evidenceImg').title = `凭证照片`;
			router.push({
				path: '/evidence/unit/img',
				query: {
					id: 0,
					ty: 3,
					name: state.selectionEvidences[0].name,
					no: state.deliveryNo,
				},
			});
		};

		{
			setTimeout(() => {
				ElMessageBox.alert('请查看、打印清单',{
					callback:function(){
						onPrinterListInfo();
					}
				})
			}, 500);
			
		}

		return {
			SignRef,
			OutInventoryRef,
			InInventoryRef,
			onSignInfo,
			onPrinterListInfo,
			onEviImgInfo,
			onOpenInfo,
			onRevokeInfo,
			onSign,
			...toRefs(state),
		};
	},
};
</script>
